<template>
	<view>
		<u-picker
			closeOnClickOverlay
			:show="pickerShow"
			:title="title"
			ref="picker"
			:columns="cityColumns"
			keyName="name"
			@confirm="confirm"
			@cancel="closeFunc"
			@close="closeFunc"
			@change="cityChange"
		></u-picker>
	</view>
</template>

<script>
export default {
	name: 'city-cascader',
	props: {
		show: {
			type: Boolean,
			default: () => {
				return false;
			}
		},
		level: {
			default: () => {
				return 3;
			}
		},
		title: {
			type: String,
			default: () => {
				return '省市区选择';
			}
		},
		cityCurrVal: {
			default: () => {
				return ''; //[310000, 310100, 310113]
			}
		}
	},
	data() {
		return {
			areaList: [],
			cityColumns: [],
			pickerShow: false
		};
	},
	watch: {
		show(newValue, oldValue) {
			let that = this;
			if (that.show) {
				if (that.areaList.length) {
					that.backDataFunc();
					return;
				}
				that.wxGetAreaList();
			} else {
				this.pickerShow = this.show;
			}
		}
	},
	methods: {
		wxGetAreaList(data) {
			let that = this;
			uni.showLoading({
				mask: true
			});
			that.$Api.wxGetAreaList(data).then((res) => {
				console.log(res, '省市区');
				uni.hideLoading();
				if (res.code == 200) {
					that.areaList = res.data;
					that.backDataFunc();
				}
			});
		},
		backDataFunc() {
			let index1 = 0;
			let index2 = 0;
			let index3 = 0;
			if (this.level == 3) {
				if (this.cityCurrVal) {
					this.areaList.forEach((item, i) => {
						if (item.id == this.cityCurrVal[0]) {
							index1 = i;
						}
						item.children.forEach((child, c) => {
							if (child.id == this.cityCurrVal[1]) {
								index2 = c;
							}
							if (child.children) {
								child.children.forEach((s, si) => {
									if (s.id == this.cityCurrVal[2]) {
										index3 = si;
									}
								});
							}
						});
					});
				}
				this.cityColumns = [this.areaList, this.areaList[index1].children, this.areaList[index1].children[index2].children];
				this.$refs.picker.setIndexs([index1, index2, index3], true);
			} else {
				if (this.cityCurrVal) {
					this.areaList.forEach((item, i) => {
						if (item.id == this.cityCurrVal[0]) {
							index1 = i;
						}
						item.children.forEach((child, c) => {
							if (child.id == this.cityCurrVal[1]) {
								index2 = c;
							}
						});
					});
				}
				this.cityColumns = [this.areaList, this.areaList[index1].children];
				this.$refs.picker.setIndexs([index1, index2, index3], true);
			}
			this.pickerShow = this.show;
		},
		confirm(e) {
			this.$emit('confirm', e);
		},
		closeFunc() {
			console.log('取消');
			this.$emit('closeFunc', false);
		},
		cityChange(e) {
			const { columnIndex, index, indexs } = e;
			if (columnIndex == 0) {
				let arr1 = this.areaList || [];
				let arr2 = this.areaList[index].children || [];
				this.cityColumns = [];
				arr1 ? this.cityColumns.push(arr1) : '';
				arr2 ? this.cityColumns.push(arr2) : '';
				if (this.level == 3) {
					let arr3 = this.areaList[index].children[0].children || [];
					arr3 ? this.cityColumns.push(arr3) : '';
				}
				// 省
				this.$refs.picker.setIndexs([index, 0, 0], true);
			} else if (columnIndex == 1 && this.level == 3) {
				// 市
				let arr1 = this.areaList || [];
				let arr2 = this.areaList[indexs[0]].children || [];
				let arr3 = this.areaList[indexs[0]].children[indexs[1]].children || [];
				this.cityColumns = [];
				arr1 ? this.cityColumns.push(arr1) : '';
				arr2 ? this.cityColumns.push(arr2) : '';
				arr3 ? this.cityColumns.push(arr3) : '';
				this.$refs.picker.setIndexs([indexs[0], indexs[1], 0], true);
			}
		}
	}
};
</script>

<style></style>
